<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form method="get">
        账户名：<input type="text" name="username" id="username"><br>
        密码：<input type="text" name="password" id="password"><br>
        <!-- <input type="submit" value="提交"> -->
        <!-- <input type="button" value="提交" id="btn"> -->
        <button type="button" id="btn">ajax提交</button>
    </form>
</body>
<script>
    // 拿到button按钮的元素节点
    let btn = document.getElementById("btn")
    // DOM 0级事件
    // btn.onclick = function(){
    //     // 第一个问题我该如何把用户填写的账户名和密码拿到
    //     let username = document.getElementById("username").value
    //     let password = document.getElementById("password").value
    //     // 发ajax请求
    //     // 1.实例化xhr对象
    //     var xhr = new XMLHttpRequest()
    //     // 2.构建请求地址
    //     // 两个参数 1->请求方式 get   2->请求 http://localhost:3000/ajax
    //     // http://localhost:3000/get?username='张凡'&password='123456'
    //     // console.log(`http://localhost:3000/get?username=${username}&password=${password}`);
    //     xhr.open("get", `http://localhost:3000/get?username=${username}&password=${password}`)      
    //     // 3.发送请求
    //     xhr.send()
    //     // 4.接收响应数据
    //     xhr.onreadystatechange = function(){
    //         if(xhr.readyState == 4){
    //             console.log(xhr.responseText)
    //         }
    //     }
    // }

    btn.addEventListener("click", function(){
        // 第一个问题我该如何把用户填写的账户名和密码拿到
        let username = document.getElementById("username").value
        let password = document.getElementById("password").value
        // 发ajax请求
        // 1.实例化xhr对象
        var xhr = new XMLHttpRequest()
        // 2.构建请求地址
        // 两个参数 1->请求方式 get   2->请求 http://localhost:3000/ajax
        // http://localhost:3000/get?username='张凡'&password='123456'
        // console.log(`http://localhost:3000/get?username=${username}&password=${password}`);
        // 注意：发送带参数的get ajax请求 最重要就是拼接 请求地址 地址？参数名=参数值&参数名=参数值
        xhr.open("get", `http://localhost:3000/get?username=${username}&password=${password}`)      
        // 3.发送请求
        xhr.send()
        // 4.接收响应数据
        xhr.onreadystatechange = function(){
            if(xhr.readyState == 4){
                console.log(xhr.responseText)
            }
        }
    })
    
</script>
</html>